﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<DHAA.Areas.Administrator.Models.CategoryModels>" %>
<%
    Ajax.BeginForm("Create", "Category", FormMethod.Post,
                   new AjaxOptions
                       {
                           UpdateTargetId = "fancybox-content",
                           LoadingElementId = "loadingIcon",
                           OnBegin = "MvcFormOnBegin",
                           OnSuccess = "MvcFormOnSuccess",
                           OnComplete = "MvcFormOnComplete",
                           OnFailure = "MvcFormOnFailure"
                       }, new { enctype = "multipart/form-data" });
    {
%>
<%= Html.ValidationSummary(true) %>
<fieldset style="width: 640px">
    <legend>Create New Category</legend>
    <div class="Message Error"><%= ViewData["MessageError"] %></div>
    <div class="Message Success"><%= ViewData["MessageSuccess"] %></div>
    <%= Html.HiddenFor(model => model.ParentID) %>
    <span class="editor-label">
        <%= Html.LabelFor(model => model.ParentName) %>
    </span><span class="editor-field">
        <%= Html.DisplayFor(model => model.ParentName) %>
    </span>
    <div class="editor-label">
        <%= Html.LabelFor(model => model.CategoryName) %>
    </div>
    <div class="editor-field">
        <%= Html.TextBoxFor(model => model.CategoryName) %>
        <%= Html.ValidationMessageFor(model => model.CategoryName) %>
    </div>
    <div class="editor-label">
        <%= Html.LabelFor(model => model.Image) %>
    </div>
    <div class="editor-field"><%= Html.DisplayTextFor(model=>model.Image) %><div id="preview">
                <% if (Html.DisplayTextFor(model=>model.Image).ToString() != "")
{
    %>
        <img src="<%=ResolveUrl("~/Default/Imagesproduct/")%><%= Html.DisplayTextFor(model=>model.Image) %>" alt="<%=Model.CategoryName %>"/>
    <%
}else{ %>
<img src="<%=ResolveUrl("~/Content/images/")%>noImage.jpg" alt="No image"/>


<%} %>
</div>
</div>
    <div class="editor-field">
        <div id="file-uploader-demo1">
            <noscript>
                <p>
                    Please enable JavaScript to use file uploader.</p>
                <!-- or put a simple form for upload here -->
            </noscript>
        </div>
        <%= Html.HiddenFor(model => model.Image, new {id = "imageText"}) %>
        <%= Html.ValidationMessageFor(model => model.Image) %>
    </div>
    <div class="editor-label">
        <%= Html.LabelFor(model => model.Description) %>
    </div>
    <div class="editor-field">
        <%= Html.TextAreaFor(model => model.Description, new { style = "width:90%; height:250px" })%>
        <%= Html.ValidationMessageFor(model => model.Description) %>
    </div>
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>
<% } %>
<link href="<%= ResolveUrl("~/Scripts/fileuploader.css") %>" rel="stylesheet" type="text/css" />
<script src="<%= ResolveUrl("~/Scripts/fileuploader.js") %>" type="text/javascript"></script>
<script type="text/javascript">
      //  $(document).ready(function() {


    var uploader = new qq.FileUploader({
        element: document.getElementById('file-uploader-demo1'),
        action: '<%=Url.Action("Upload") %>',
        multiple: false,    
        allowedExtensions: ['jpg', 'png', 'gif'],
        debug: true,
//        sizeLimit: 1024000,
//        minSizeLimit: 0,    
        onComplete: function(id, fileName, responseJSON) {
            $('#preview img').attr('src', '<%=ResolveUrl("~/Default/Imagesproduct/")%>' + fileName);
            $('#imageText').val(fileName);
        },
        messages: {
            typeError: "{file} has invalid extension. Only {extensions} are allowed.",
            sizeError: "{file} is too large, maximum file size is {sizeLimit}.",
            minSizeError: "{file} is too small, minimum file size is {minSizeLimit}.",
            emptyError: "{file} is empty, please select files again without it.",
            onLeave: "The files are being uploaded, if you leave now the upload will be cancelled."            
        },
        showMessage: function(message){
            alert(message);
        }               
        /*
        onSubmit: function(id, fileName){},
        onProgress: function(id, fileName, loaded, total){},
        onComplete: alert('OK')
        onCancel: function(id, fileName){},
        */
    });
             
              
    </script>
